<template>
  <div class="wrapper">
    <el-row>
      <el-col :span="leftWidth">
        <div class="card-group" :style="{height:'calc(100vh - ' + height + 'px)'}" data-v-7moor>
          <div class="overScroll">
            <slot name="card"></slot>
          </div>
        </div>
      </el-col>
      <el-col :span="rightWidth" class="notice-rig">
        <div class="detail" :style="{height:'calc(100vh - ' + height + 'px)'}" data-v-7moor>
          <div class="overScroll" data-v-7moor>
            <slot name="detail"></slot>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  export default {
    data () {
      return {
      }
    },
    props: {
      height: Number,
      leftWidth: {type: Number, default: 12},
      rightWidth: {type: Number, default: 12}
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../assets/common.styl";
  .wrapper
    clear both
    .card-group
      width 100%
      height calc(100vh - 170px)
      border-right 1px solid $c-border1
      box-sizing border-box
      float left
    .detail
      float left
      width 100%
      height calc(100vh - 173px)
    .overScroll
      overflow-y auto
      overflow-x hidden
      width 100%
      height 100%
</style>
